<template>
	<scroll-view class="page b-bg haveBar" id="scrollWrap" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
		<view class="test"></view>
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<user></user>
		</view>
		<banner :banner_image="banner_image"></banner>
		<div class="tabs">
				<div class="tab scroll-view_H" ref="scrollDiv">
						<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
						<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
						<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
						<div class="scroll-view-item_H active">推荐书目</div>
						
				 </div>
				<div>
					<!-- <img src="../../static/img/sousuo.png" mode="" class="search"></img> -->
					<img src="../../static/img/sousuo.png" class="search" alt="" @tap="goSearch">
				</div>
		</div>
		
		
		<view class="blockIn" v-show="scorllUi.cri">
			
		</view>
		<view class="work-works">
			<view class="work-works-inner">
				<view class="items">
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录</div>
					</view>
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录毛泽东语录毛泽东语录毛泽东语录</div>
					</view>
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录</div>
					</view>
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录</div>
					</view>
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录</div>
					</view>
					<view class="item">
						<view class="imgBox"></view>
						<div class="name">毛泽东语录毛泽东语录毛泽东语录</div>
					</view>
				</view>
			</view>
		</view>
		<barCon :is_up="is_up" ref='barCon'></barCon>
	</scroll-view>
	
</template>

<script>
   document.addEventListener('UniAppJSBridgeReady', function() {
	 uni.postMessage({
		 data: {
			 action: 'message'
		 }
	 });
	 uni.getEnv(function(res) {
		 console.log('当前环境：' + JSON.stringify(res));
	 });

	
	 document.getElementById('postMessage').addEventListener('click', function() {
	   uni.postMessage({
		 data: {
		   action: 'message'
		 }
	   });
	 });
   });
	import mixin from '@/util/mixin.js';     
	export default {
		mixins: [mixin],
		data() {
			return {
				form_data:{
					city_id:"",
					county_id:"",
					role_id: "",
				},
				page:{
					is_bottom:false,
					page:1
				},
				scorllUi:{
					height:"",
					cri:false
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				goId:"",
				vote_num:5,
				is_vote_btn:"",
				list:[],
				dec:'',
				banner_image:"",
				is_up:""
			};
		},
		onLoad(options) {
			this.goId = options.id;
			this.scorllUi.height = 500 / 750 * window.innerWidth;
			this.getdec();
			this.render(null);
		},
		methods: {
			async getdec() {
				//console.log('运行');
				const res = await this.$httpPub({
					  url: 'activity/'+ this.goId,
					  method:'get',
					  data:{}
				})
			   this.dec = res;
			   this.banner_image = this.dec.banner_image;
			   this.is_up = this.dec.is_upload_btn;
			},
			envetTp(item){
				if(this.vote_num === 0) {
					this.toast("今日投票次数已用完");
					return;
				}
				//(item);
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '您今天还有'+ _this.vote_num +'次投票机会是否确定投票',
					success: async(res) => {
						if (res.confirm) {
							const res = await this.$http({
								url:"user/vote",
								method:'post',
								data:{
									id:item.id
								}
							})
							if(res.residue_num) {
								_this.vote_num = res.residue_num;
								item.total_vote ++;
								item.is_vote = true;
								_this.toast('投票成功')
							}
						} else if (res.cancel) {
							('用户点击取消');
						}
					}
				});
				// const res = await this.$http({
				// 	url:'user/vote',
				// 	medthod:'post',
				// 	id:id
				// })
				// console.log(id);
			},
			async render(res) {
				if(res) {
					this.list = [];
					this.form_data = res;
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					const _this = this;
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'article/' + _this.goId,
						  method:'get',
						  data:postData
					})
					// console.log(res);
					this.is_vote_btn = res.is_vote_btn;
					this.vote_num = res.vote_remainder_num;
					this.list.push(...res.data);
					// console.log(this.list);
					// console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			async collect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  id:item.id
					  }
				})
				if(res) {
					item.collect_id = res.id;
					item.is_collect = 1;
					
					item.collect_total ++;
					this.toast('点赞成功')
				}
			},
			async uncollect(item) {
				//console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  collect_id:item.collect_id
					  }
				})
				
				if(res) {
					item.collect_id = 0;
					item.is_collect = 0; 
					item.collect_total --;
					this.toast('取消点赞成功')
				}
				return false;
			},
			scrolltolower() {
				this.render(null);
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop;
				// console.log(this.old.scrollTop);
				// console.log(this.old.scrollTop);
				// console.log(this.scorllUi);
				if(this.old.scrollTop > this.scorllUi.height) {
					this.scorllUi.cri = true;
				} else {
					this.scorllUi.cri = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	// .test {
	// 	width: 20rpx;
	// 	background-color: #f24545;
	// 	position: fixed;
	// 	height: 500rpx;
	// }
	.banner {
	  padding: 0;
	  border-radius: 0;
	}
	
	
	.work-works-inner {
		
		
	}
	
	.tabs {
		  padding: 36rpx 42rpx 10rpx 42rpx;
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
		  // background-color: #fff;
		  font-size: 30rpx;
		  height: 108rpx;
		  border-radius: 20rpx;
		  align-items: center;
		  box-sizing: border-box;
	}
	.search {
		  width: 34rpx;
		  height: 34rpx;
		  position: relative;
		  top:4rpx;
	}
	
	.scroll-Y {
			height: 300rpx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 560rpx;
			overflow-y: hidden;
			overflow-x: auto;
			
		}
	
		.scroll-view-item_H {
			display: inline-block;
			width: 150rpx;
			text-align: center;
			font-size: 35rpx;
			padding-bottom: 17rpx;
			margin-right: 22rpx;
			&.active {
				 color:#333333;
				 font-weight: bold;
				 background-image: url('/static/img/tab_active.png');
				 background-size: auto 28rpx;
				 background-repeat: no-repeat;
				 background-position:10rpx bottom;
			}
			&.disable {
				color: #b9b8b8;
			}
		}
	
	.noneImg {
		width: 363rpx;
		height: 428rpx;
		margin: 125rpx auto 455rpx auto;
		display: block;
	}
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
	       // padding-bottom: 0;
	   .work-inner {
		   background-color: #fff;
		   padding: 28rpx;
		   padding-bottom: 7rpx;
		   border-radius: $border-radius;
		   .img-title {
			   width: 281rpx;
			   height: 66rpx;
		   }
		   .work-cont {
			   font-size: 28rpx;
			   line-height: 1.6;
			   .p {
				   margin-bottom: 20rpx;
			   }
		   }
	   }
   }
   .work-works {
	     padding: 10rpx 36rpx;
		 display: flex;
	  .work-works-inner {
		  background-color: #fff;
		  padding: 0rpx 12rpx;
		  border-radius: $border-radius;
	  }
	  .items {
	  	  overflow: hidden;
		  padding-top: 26rpx;
		  min-height: 966rpx;
		  background-color: #fff;
	  	  .item {
	  		  flex: none;
	  		  padding-bottom: 32rpx;
	  		  position: relative;
			  width: 25%;
			  float: left;
			  padding: 12rpx 12rpx;
			  margin-bottom: 5rpx;
			  font-weight: bold;
	  		  .imgBox {
	  		  		width: 100%;
	  				height: 188rpx;
					background-color: #cf4f5e;
	  				border-radius: 8rpx;
	  				overflow: hidden;
					margin-bottom: 10rpx;
	  		  }
			  .name {
				  font-size: 23rpx;
				  text-align: center;
				  height: 60rpx;
				  overflow: hidden;
			  }
	  	  }
	  }
   }
</style>
